import 'package:flutter/material.dart';
import 'package:yp/config/style.dart';
import 'package:yp/util/util.dart';
import 'package:yp/widgets/bottom_sheet.dart';
import 'package:yp/widgets/button_widget.dart';
import 'package:yp/widgets/index.dart';

/// 售后详情

class AfterMarketDetail extends StatefulWidget {
  const AfterMarketDetail({Key key}) : super(key: key);

  @override
  _AfterMarketDetailState createState() => _AfterMarketDetailState();
}

class _AfterMarketDetailState extends State<AfterMarketDetail>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  /// 1 退款审核中 2 审核成功待寄回 3 退款中 4 退款成功
  int _pageType = 2;
  List _goodsList = [
    {'num': 1, 'gift': false},
    {'num': 3, 'gift': false},
    {'num': 5, 'gift': false},
    {'num': 2, 'gift': true},
    {'num': 1, 'gift': true}
  ];

  /// 选中了哪一个退货方式
  int _return = 2;

  /// 快递
  String _delivery;

  /// 打开关闭
  bool _goodsOpen = true;

  /// 问题照片
  List _imageList = [
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.imgmini.eastday.com%2Fmobile%2F20180730%2F20180730190438_5a722ef53f91678d7f9dd4a7e07ed06d_3.jpeg&refer=http%3A%2F%2F00.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633352348&t=835fbca7723c0160bd9c5541012ad676',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F09.imgmini.eastday.com%2Fmobile%2F20180424%2F20180424202830_cea5602c56efe0e7c20f7c365fc363fc_37.png&refer=http%3A%2F%2F09.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633352348&t=d72a3740a259a68159c3ff2778d4ad67',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F08.imgmini.eastday.com%2Fmobile%2F20180630%2F20180630112557_74e97723a9caa2f6218c135d73b9abe4_3.jpeg&refer=http%3A%2F%2F08.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633352348&t=6bae52c37070f9dc29fa365a6c6b04b9'
  ];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: YPNavigationBar('售后详情'),
      body: _body(),
      backgroundColor: EsColors.White,
      floatingActionButton: _bottom(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  Widget _body() {
    return Padding(
      padding: EdgeInsets.fromLTRB(
          0,
          0,
          0,
          (_pageType == 1 || _pageType == 2)
              ? (MediaQuery.of(context).padding.bottom + 65)
              : 0),
      child: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _header(),
                _orderInfo(),
                YpLine(
                    height: 20,
                    thickness: 20,
                    color: EsColors.BackGroundSecondary),
                _returnMethod(),
                _title(),
                _goodsInfo(),
                YpLine(
                    height: 20,
                    thickness: 20,
                    color: EsColors.BackGroundSecondary),
                _reason()
              ],
            ),
          )
        ],
      ),
    );
  }

  /// header
  Widget _header() {
    return Container(
      color: EsColors.Primary,
      padding: EdgeInsets.symmetric(vertical: 16),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                _headerText(_pageType),
                style: TextStyle(
                    color: EsColors.White,
                    fontSize: EsSizes.MD,
                    fontWeight: EsFontWeights.Normal),
              ),
              SizedBox(width: 3),
              Icon(
                Icons.arrow_forward_ios,
                size: EsSizes.XS,
                color: EsColors.White,
              ),
            ],
          ),
          SizedBox(height: 5),
          Text(
            '2021年09月04日  23:52:00',
            style: TextStyle(
                color: EsColors.White,
                fontSize: EsSizes.XS,
                fontWeight: EsFontWeights.Normal),
          )
        ],
      ),
    );
  }

  /// 头部对应的文字
  String _headerText(int type) {
    switch (type) {
      case 1:
        return '退款申请审核中';
        break;
      case 2:
        return '审核成功，待寄回';
        break;
      case 3:
        return '退款中';
        break;
      case 4:
        return '退款成功';
        break;

      default:
        return '';
    }
  }

  /// 订单信息
  Widget _orderInfo() {
    return Container(
      color: EsColors.White,
      padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 12),
      child: Row(children: [
        Expanded(
          flex: 3,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                '退货单号：23456712',
                style: TextStyle(
                    color: EsColors.Content,
                    fontSize: EsSizes.SM,
                    fontWeight: EsFontWeights.Normal),
              ),
              Text(
                '申请时间：2021-09-04 23:59:16',
                style: TextStyle(
                    color: EsColors.Content,
                    fontSize: EsSizes.SM,
                    fontWeight: EsFontWeights.Normal),
              ),
              Text(
                '退款方式：原支付方式返回',
                style: TextStyle(
                    color: EsColors.Content,
                    fontSize: EsSizes.SM,
                    fontWeight: EsFontWeights.Normal),
              )
            ],
          ),
        ),
        Container(
          height: 60,
          color: EsColors.BackGround,
          width: 1,
        ),
        SizedBox(width: 20),
        Expanded(
            flex: 1,
            child: Text('预计退款\n23:52:00',
                style: TextStyle(
                    color: EsColors.TitleSecondary,
                    fontSize: EsSizes.SM,
                    fontWeight: EsFontWeights.Medium)))
      ]),
    );
  }

  /// 退货方式
  Widget _returnMethod() {
    return Visibility(
      visible: _pageType != 1,
      child: Container(
        margin: EdgeInsets.only(left: 12, top: 14),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '退货方式',
              style: TextStyle(
                  color: EsColors.ContentSecondary,
                  fontSize: EsSizes.SM,
                  fontWeight: EsFontWeights.Normal),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8, bottom: 20),
              child: Row(
                children: [
                  Visibility(
                    visible: _pageType == 2 ||
                        ((_pageType == 3 || _pageType == 4) && _return == 1),
                    child: Padding(
                      padding: const EdgeInsets.only(right: 8),
                      child: EsOutLineButton(
                        '快递寄回',
                        normal: !(_return == 1),
                        padding:
                            EdgeInsets.symmetric(vertical: 4, horizontal: 16),
                        onTap: _pageType == 2
                            ? () {
                                setState(() {
                                  _return = 1;
                                });
                              }
                            : null,
                      ),
                    ),
                  ),
                  Visibility(
                    visible: _pageType == 2 ||
                        ((_pageType == 3 || _pageType == 4) && _return == 2),
                    child: EsOutLineButton(
                      '自送上门',
                      normal: !(_return == 2),
                      padding:
                          EdgeInsets.symmetric(vertical: 4, horizontal: 16),
                      onTap: _pageType == 2
                          ? () {
                              setState(() {
                                _return = 2;
                              });
                            }
                          : null,
                    ),
                  )
                ],
              ),
            ),
            YpLine(),
            SizedBox(height: 8),
            Text(
              '寄回地址',
              style: TextStyle(
                  color: EsColors.ContentSecondary,
                  fontSize: EsSizes.SM,
                  fontWeight: EsFontWeights.Normal),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 10, bottom: 10),
              child: Text('上海市松江区九亭镇寅西路99号',
                  style: TextStyle(
                      color: EsColors.TitleSecondary,
                      fontSize: EsSizes.SM,
                      fontWeight: EsFontWeights.Normal)),
            ),
            YpLine(),
            SizedBox(height: 12),
            Row(
              children: [
                SizedBox(
                  width: 66,
                  child: Text(
                    '收货人',
                    style: TextStyle(
                        color: EsColors.ContentSecondary,
                        fontSize: EsSizes.SM,
                        fontWeight: EsFontWeights.Normal),
                  ),
                ),
                Text('黄渤',
                    style: TextStyle(
                        color: EsColors.TitleSecondary,
                        fontSize: EsSizes.SM,
                        fontWeight: EsFontWeights.Normal)),
              ],
            ),
            SizedBox(height: 12),
            YpLine(),
            SizedBox(height: 12),
            Row(
              children: [
                SizedBox(
                  width: 66,
                  child: Text(
                    '联系方式',
                    style: TextStyle(
                        color: EsColors.ContentSecondary,
                        fontSize: EsSizes.SM,
                        fontWeight: EsFontWeights.Normal),
                  ),
                ),
                Text('13822990011',
                    style: TextStyle(
                        color: EsColors.TitleSecondary,
                        fontSize: EsSizes.SM,
                        fontWeight: EsFontWeights.Normal)),
              ],
            ),
            SizedBox(height: 12),
            YpLine(),
            SizedBox(height: 12),
            Row(
              children: [
                SizedBox(
                  width: 66,
                  child: Text(
                    '快递公司',
                    style: TextStyle(
                        color: EsColors.ContentSecondary,
                        fontSize: EsSizes.SM,
                        fontWeight: EsFontWeights.Normal),
                  ),
                ),
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      if (_pageType == 2) {
                        print('选择快递公司');

                        // selectDelivery(context).then((value) {
                        //   print(value);
                        //   setState(() {
                        //     _delivery = value['name'];
                        //   });
                        // });
                        YpBottomSheet.showText(
                            context, ['中通', '圆通', "申通", "韵达"],
                            clickCallback: (index, text,{info}) {
                          print(index);
                          print(text);
                          _delivery = text;
                        });
                      }
                    },
                    child: Text(_delivery ?? '请选择',
                        style: TextStyle(
                            color: (_delivery?.isEmpty ?? true)
                                ? EsColors.ContentSecondary
                                : EsColors.TitleSecondary,
                            fontSize: EsSizes.SM,
                            fontWeight: EsFontWeights.Normal)),
                  ),
                ),
                Icon(
                  Icons.arrow_forward_ios,
                  size: EsSizes.SM,
                  color: EsColors.ContentSecondary,
                ),
                SizedBox(width: 12),
              ],
            ),
            SizedBox(height: 12),
            YpLine(),
            SizedBox(height: 12),
            Row(
              children: [
                SizedBox(
                  width: 66,
                  child: Text(
                    '快递单号',
                    style: TextStyle(
                        color: EsColors.ContentSecondary,
                        fontSize: EsSizes.SM,
                        fontWeight: EsFontWeights.Normal),
                  ),
                ),
                Expanded(
                  child: TextField(
                    onTap: () {
                      print('输入订单备注');
                    },
                    style: TextStyle(
                      fontSize: EsSizes.SM,
                      color: EsColors.TitleSecondary,
                    ),
                    cursorColor: EsColors.Content,
                    readOnly: _pageType != 2,
                    decoration: InputDecoration(
                      hintText: '请填写快递单号',
                      contentPadding: EdgeInsets.zero,
                      isDense: true,
                      filled: false,
                      fillColor: Colors.transparent,
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 12),
            YpLine(),
            SizedBox(height: 12),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  width: 66,
                  child: Text(
                    '备注',
                    style: TextStyle(
                        color: EsColors.ContentSecondary,
                        fontSize: EsSizes.SM,
                        fontWeight: EsFontWeights.Normal),
                  ),
                ),
                Expanded(
                  child: TextField(
                    onTap: () {
                      print('输入订单备注');
                    },
                    style: TextStyle(
                      fontSize: EsSizes.SM,
                      color: EsColors.TitleSecondary,
                    ),
                    cursorColor: EsColors.Content,
                    maxLines: 3,
                    readOnly: _pageType != 2,
                    decoration: InputDecoration(
                      hintText: '请输入备注信息',
                      contentPadding: EdgeInsets.zero,
                      isDense: true,
                      filled: false,
                      fillColor: Colors.transparent,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  /// 寄回商品
  Widget _title() {
    return Visibility(
      visible: _pageType != 1,
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.only(left: 12, bottom: 5, top: 12),
        color: EsColors.BackGroundSecondary,
        child: Text('寄回商品',
            style: TextStyle(
                fontSize: EsSizes.SM,
                color: EsColors.TitleSecondary,
                fontWeight: EsFontWeights.Medium)),
      ),
    );
  }

  /// 退款商品信息
  Widget _goodsInfo() {
    return Column(
      children: [
        Container(
            color: EsColors.White,
            padding: const EdgeInsets.fromLTRB(12, 0, 0, 12),
            child: ListView.separated(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              separatorBuilder: (context, index) => YpLine(),
              itemCount: (((_goodsList?.length ?? 0) > 3) &&
                      _goodsOpen &&
                      _pageType != 1)
                  ? 3
                  : (_goodsList?.length ?? 0),
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.fromLTRB(0, 14, 0, 14),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      CachedImage(
                          width: 60,
                          height: 60,
                          margin: EdgeInsets.fromLTRB(5, 0, 12, 0),
                          scale: BoxFit.cover,
                          path:
                              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.16pic.com%2F00%2F59%2F68%2F16pic_5968601_b.jpg&refer=http%3A%2F%2Fphoto.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633348684&t=459b6f711ff2b76838810c8071fe39c2'),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Visibility(
                                  visible: _goodsList[index]['gift'],
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                        vertical: 0, horizontal: 3),
                                    margin: EdgeInsets.only(right: 4),
                                    decoration: BoxDecoration(
                                      color: EsColors.Pink.withOpacity(0.15),
                                      border: Border.all(
                                        color: EsColors.Pink,
                                        width: 1,
                                      ),
                                      borderRadius: BorderRadius.circular(3),
                                    ),
                                    child: Text(
                                      '赠品',
                                      style: TextStyle(
                                          color: EsColors.Pink,
                                          fontSize: EsSizes.XXS,
                                          fontWeight: EsFontWeights.Normal),
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: Text(
                                    'KETO铺子的赠品KETO铺子的赠品KETO铺子的赠品',
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: TextStyle(
                                        color: EsColors.Title,
                                        fontSize: EsSizes.SM,
                                        fontWeight: EsFontWeights.Normal),
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(height: 10),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                RichText(
                                  // textAlign: TextAlign.center,
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  text: TextSpan(
                                      text: '￥',
                                      style: TextStyle(
                                          fontSize: EsSizes.XXS,
                                          color: EsColors.Primary,
                                          fontWeight: EsFontWeights.Normal),
                                      children: <TextSpan>[
                                        TextSpan(
                                            text: '90.00',
                                            style: TextStyle(
                                                fontSize: EsSizes.LG,
                                                color: EsColors.Primary,
                                                fontWeight:
                                                    EsFontWeights.Medium)),
                                      ]),
                                ),
                                SizedBox(width: 10),
                                Expanded(
                                  child: Text('颜色：白色',
                                      style: TextStyle(
                                          fontSize: EsSizes.XS,
                                          color: EsColors.ContentSecondary,
                                          fontWeight: EsFontWeights.Normal)),
                                ),
                                Text('x' + _goodsList[index]['num'].toString(),
                                    style: TextStyle(
                                        fontSize: EsSizes.XS,
                                        color: EsColors.ContentSecondary,
                                        fontWeight: EsFontWeights.Normal)),
                              ],
                            ),
                          ],
                        ),
                      ),
                      SizedBox(width: 12),
                    ],
                  ),
                );
              },
            )),
        Visibility(
          visible: _pageType != 1,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              setState(() {
                _goodsOpen = !_goodsOpen;
              });
            },
            child: Column(
              children: [
                YpLine(),
                Container(
                  width: double.infinity,
                  alignment: Alignment.center,
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Text(
                    _goodsOpen ? '展开更多' : '收起',
                    style: TextStyle(
                        color: EsColors.Content,
                        fontSize: EsSizes.XS,
                        fontWeight: EsFontWeights.Normal),
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    );
  }

  /// 原因
  Widget _reason() {
    return Container(
      padding: const EdgeInsets.fromLTRB(12, 12, 0, 30),
      color: EsColors.White,
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Row(
          children: [
            Text(
              '退货原因',
              style: TextStyle(
                  color: EsColors.Content,
                  fontSize: EsSizes.SM,
                  fontWeight: EsFontWeights.Normal),
            ),
            SizedBox(width: 12),
            Expanded(
                child: Text(
              '我不想买了',
              textAlign: TextAlign.start,
              style: TextStyle(
                  color: EsColors.TitleSecondary,
                  fontSize: EsSizes.MD,
                  fontWeight: EsFontWeights.Normal),
            )),
            SizedBox(width: 12),
          ],
        ),
        SizedBox(height: 12),
        YpLine(),
        SizedBox(height: 12),
        Text(
          '问题描述',
          style: TextStyle(
              color: EsColors.Content,
              fontSize: EsSizes.SM,
              fontWeight: EsFontWeights.Normal),
        ),
        SizedBox(height: 12),
        Padding(
          padding: const EdgeInsets.only(right: 12, bottom: 25),
          child: Text(
            '暂无哈哈哈哈哈哈哈哈哈哈',
            style: TextStyle(
                color: EsColors.TitleSecondary,
                fontSize: EsSizes.SM,
                fontWeight: EsFontWeights.Normal),
          ),
        ),
        Row(
          children: [
            Wrap(
              runSpacing: 12,
              spacing: 12,
              children: List.generate(
                  _imageList.length,
                  (index) => CachedImage(
                      width: MediaQuery.of(context).size.width / 4 - 14,
                      height: MediaQuery.of(context).size.width / 4 - 14,
                      path: _imageList[index])),
            )
          ],
        )
      ]),
    );
  }

  /// 下边的按钮
  Widget _bottom() {
    return Visibility(
      visible: _pageType == 1 || _pageType == 2,
      child: EsBottomWidget(
          leftTitle: null,
          rightTitle: _pageType == 1 ? '撤销申请' : '提交资料',
          rightlick: () {
            toast(_pageType == 1 ? '撤销成功' : '提交资料');
          }),
    );
  }
}
